<template>
  <div id="orderform">
    <van-nav-bar title="订单列表" left-arrow fixed @click-left="onClickLeft" />

    <van-tabs v-model="active" sticky animated swipeable>
      <van-tab title="全部">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无数据"
        />
      </van-tab>
      <van-tab title="待支付">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无数据"
        />
      </van-tab>
      <van-tab title="待配送">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无数据"
        />
      </van-tab>
      <van-tab title="已配送">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无数据"
        />
      </van-tab>
      <van-tab title="已完成">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无数据"
        />
      </van-tab>
      <van-tab title="已退款">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无数据"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
#orderform {
  .van-nav-bar {
    background-color: #f73a3a;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon {
      color: #fff;
    }
  }
  .van-tabs {
    top: 46px;
    left: 0;
  }
  .van-empty{
    padding: 100px 0;
  }
  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
}
</style>